<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'RankingList',
  setup () {
    const newRight = reactive({
      newRightTitle: '导购排行',
      rankingList: [
        { id: 1, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 2, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 3, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 4, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 5, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 6, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 7, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 8, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 9, text: '【合肥房产资讯】保利紫云云起 定存盛启' },
        { id: 10, text: '【合肥房产资讯】保利紫云云起 定存盛启' }
      ],
      newRightTitle2: '实时动态',
      dynamicList: [
        { id: 1, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 2, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 3, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 4, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 5, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 6, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 7, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 8, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 9, text: '保利招商时光印象建面约93-125㎡精著3/4房' },
        { id: 10, text: '保利招商时光印象建面约93-125㎡精著3/4房' }
      ]
    })
    return {
      ...toRefs(newRight)
    }
  }
}
</script>
<template >
  <div class="new_right">
    <ul>
      <h6>{{newRightTitle}}</h6>
      <li v-for="(ranking,idx) in rankingList" :key="idx">
        <div>{{ranking.id}}</div>
        <div>{{ranking.text}}</div>
      </li>
    </ul>
    <ul>
      <h6>{{newRightTitle2}}</h6>
      <li v-for="(dynamic,idx) in dynamicList" :key="idx">
        <div>{{dynamic.id}}</div>
        <div>{{dynamic.text}}</div>
      </li>
    </ul>
  </div>
</template>
<style  lang='less'>
.new_right {
  width: 320px;
  margin-left: 22px;
  ul {
    width: 320px;
    height: 451px;
    background-color: #ededed;
    margin-bottom: 14px;
    border: 1px solid rgb(237, 237, 237);
    h6 {
      width: 76px;
      height: 51px;
      text-align: center;
      line-height: 51px;
      background-color: #fff;
      color: #333333;
      font-size: 12px;
      font-weight: 700;
    }
    li {
      display: flex;
      align-items: center;
      padding: 12px 15px 12px 15px;
      div:nth-child(1) {
        width: 16px;
        height: 16px;
        background-color: #3072f6;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        margin-right: 15px;
      }
      div:nth-child(2) {
        font-size: 12px;
        color: #666666;
      }
    }
    li:nth-child(2n-2) {
      background: #ffffff;
    }
  }
}
</style>
